<template>
  <!--  -->
  <el-container
    v-if="token !== '' && JSON.stringify(userInfo) !== '{}'"
    id="container"
  >
    <el-aside
      v-if="isShow"
      :class="{ slideIn: !isHide, slideOut: isHide }"
      :style="{ 'overflow-x': 'hidden' }"
    >
      <Nav />
      <el-drawer
        :size="300"
        title="教务系统导航列表"
        :visible.sync="drawer"
        :direction="direction"
      >
        <Nav />
      </el-drawer>
    </el-aside>
    <el-container>
      <el-header v-if="isShow">
        <Header
          @hideAside="hideAside"
          :avatar="
            userInfo.studentAvatar ||
            userInfo.teacherAvatar ||
            'http://q4.qlogo.cn/headimg_dl?dst_uin=2857734156&spec=100'
          "
        />
      </el-header>
      <el-main ref="main">
        <el-row>
          <el-col :span="24">
            <Breadcrumb :navs="navs" />
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <panel-desc
              :name="
                userInfo.studentName ||
                userInfo.name ||
                userInfo.teacherName ||
                userInfo.deanName
              "
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <transition>
              <router-view name="eqPage" />
            </transition>
          </el-col>
        </el-row>
      </el-main>
      <el-footer v-if="$route.name !== 'profile'">
        <Footer />
      </el-footer>
    </el-container>
  </el-container>
  <transition v-else>
    <router-view name="eqLoginComponent" />
  </transition>
</template>

<script>
import Nav from "@/components/Nav";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Breadcrumb from "@/components/Breadcrumb";

import { mapState, mapActions, mapGetters } from "vuex";

import { throttle, isMobile } from "@/util/util";

let timer = null;

const vueComponent = {
  name: "App",
  provide: function () {
    return {
      app: this,
    };
  },
  data() {
    return {
      asideWidth: 0,
      isHide: false,
      navs: [],
      drawer: false,
      direction: "ltr",
      isShow: true,
    };
  },
  mounted() {
    this.$bus.$on("print", (isShow) => {
      this.isShow = isShow;
    });
    this.$bus.$on("navs", (navs) => {
      this.navs = navs;
    });
    if (document.documentElement.clientWidth < 762) {
      this.isHide = true;
    }
    if (isMobile()) {
      this.isHide = true;
      this.drawer = true;
    }
    window.addEventListener(
      "resize",
      throttle(() => {
        if (!isMobile()) {
          if (document.documentElement.clientWidth < 762) {
            this.isHide = true;
            this.drawer = true;
          } else {
            this.drawer = false;
            this.isHide = false;
          }
        }
        this.$router.isHide = this.isHide;
      }, 100)
    );
  },
  computed: {
    ...mapState("user", ["token", "userInfo"]),
  },
  methods: {
    hideAside() {
      if (document.documentElement.clientWidth > 762) {
        this.isHide = !this.isHide;
      } else {
        this.drawer = !this.drawer;
      }
    },
  },
  components: {
    Nav,
    Header,
    Footer,
    Breadcrumb,
  },
};

export default vueComponent;
</script>

<style lang="scss">
body > .el-container {
  height: 100vh;
}

.slideIn {
  animation: slideIn 1s forwards;
}

.slideOut {
  animation: slideOut 1s forwards;
}

@keyframes slideOut {
  to {
    width: 0;
  }
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 280px;
  }
}

/* 进入过程中 */
.v-enter-active {
  animation: animate 1s;
}

@keyframes animate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Student View 和 Teacher View 通用样式 */
#student-view {
  width: 100%;
  height: 100%;
}

p {
  font: 16px/20px tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
  height: 25px;
  line-height: 25px;
}

.el-row,
p:not(p:first-child) {
  margin: 10px 0;
  font-size: 18px;
}
p.label {
  text-align: right;
}

.desc {
  font-size: 16px;
}

.info {
  color: #999;
}
</style>
